<template>
  <div class="platform">
    <div class="header">
      <div class="top">
        <p>账号</p>
        <el-input v-model="input" style="width: 240px" placeholder="账号" />
        <p>用户名</p>
        <el-input v-model="input" style="width: 240px" placeholder="用户名" />
        <p>手机号</p>
        <el-input v-model="input" style="width: 240px" placeholder="手机号" />
      </div>
      <div class="bottom">
        <p>邮箱</p>
        <el-input v-model="input" style="width: 240px" placeholder="邮箱" />
        <p>学院</p>
        <el-select v-model="value" placeholder="学院" size="large" style="width: 240px">
          <el-option
            v-for="item in college"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <el-divider border-style="dashed" />
      <div class="conter">
        <el-button type="primary" plain style="width: 80px; height: 40px">查询</el-button>
      </div>
    </div>
    <div class="body">
      <button class="add" @click="$router.push('')">新增</button>
      <div class="dashedline"></div>

      <div class="list">
        <el-table
          :data="lists"
          style="width: 100%"
          class="table"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column type="index" width="50" />
          <el-table-column prop="account" label="账号" width="120" align="center" />
          <el-table-column prop="name" label="用户名" width="80" align="center" />
          <el-table-column prop="gender" label="性别" width="80" align="center" />
          <el-table-column prop="Email" label="电子邮箱" width="150" align="center" />
          <el-table-column prop="school" label="所属学院" width="140" align="center" />
          <el-table-column label="项目负责人" width="180" align="center">
            <template #default="scope">
              <el-tag v-if="scope.row.Enable">是</el-tag>
              <el-tag type="danger" v-else>否</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="entry" label="项目名称" width="180" align="center" />
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <p>共1页 {{ lists.length }} 条记录,当前显示：第 {{ paging }} 页（第 1 到 1 记录 ）</p>
        </div>
      </div>
      <div class="paging">
        <!-- <el-pagination background layout="prev, pager, next" :total="1000" /> -->
        <div class="demo-pagination-block">
          <!-- <div class="demonstration">Jump to</div> -->
          <el-pagination
            :size="size"
            :disabled="disabled"
            :background="background"
            layout="prev, pager, next, jumper"
            :total="1000"
            @current-change="handleCurrentChange"
            :page-count="lists.length"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const input = ref('')
const value = ref('')
const college = [
  { value: '信息工程学院', label: '信息工程学院' },
  { value: '电子工程学院', label: '电子工程学院' },
  { value: '计算机学院', label: '计算机学院' },
  { value: '通信工程学院', label: '通信工程学院' },
  { value: '自动化学院', label: '自动化学院' },
  { value: '商学院', label: '商学院' }
]

const lists = ref([
  {
    id: 1,
    account: '123456',
    name: '张三',
    gender: '男',
    Email: '123456@qq.com',
    school: '信息工程学院',
    Enable: true,
    entry: '创新创业系统'
  },
  {
    id: 1,
    account: '123456',
    name: '李四',
    gender: '男',
    Email: '123456@qq.com',
    school: '电子工程学院',
    Enable: false,
    entry: '创新创业系统'
  }
])
// const currentPage3 = ref(5)
// const pageSize3 = ref(100)
const paging = ref(1)

const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  paging.value = val
}

const handleEdit = (index, row) => {
  console.log(index, row)
}
const handleDelete = (index, row) => {
  console.log(index, row)
}

const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
</script>

<style lang="less" scoped>
.platform {
  width: 1350px;
  // background-color: #fff;
  margin: 0 auto;
  margin-top: 40px;
  margin-bottom: 40px;
}
.header {
  background-color: #fff;
  padding: 40px 30px;
  margin-bottom: 20px;
  color: #646c9a;
  font-size: 12px;
  .top {
    display: flex;
    justify-content: left;
    height: 40px;
    line-height: 40px;
    margin-bottom: 30px;
  }
  .bottom {
    display: flex;
    justify-content: left;
    height: 40px;
    line-height: 40px;
  }
  p {
    width: 40px;
    margin: 0 40px 0 20px;
  }
  .conter {
    display: flex;
    justify-content: center;
  }
}
.body {
  background-color: #fff;
  .add {
    margin: 20px 40px;
    padding: 10px 10px;
    width: 70px;
    height: 40px;
    background-color: #e9f2fa;
    border: 0;
    color: #36a0fe;
    transition: all 0.1s;
    border-radius: 5px;
    &:hover {
      background-color: #1461cd;
      color: #fff;
    }
  }

  .dashedline {
    width: 100%;
    height: 1px;
    border: 0.5px dashed #ccc;
    margin-bottom: 20px;
  }
  .list {
    padding: 0 30px;
    ul {
      display: flex;
      justify-content: space-between;
      margin: 0 30px;
      padding: 0 20px;
      height: 60px;
      align-items: center;
      border-bottom: 1px solid #ececec;
      // line-height: 50px;
      // background-color: pink;
      &:hover {
        background-color: #eef1f5;
      }
      li {
        width: 8%;
        // background-color: pink;
        text-align: center;
      }
      li:nth-child(5) {
        width: 20%;
      }
      li:nth-child(8) {
        width: 16%;
      }
    }
    .header1 {
      ul {
        background-color: #1461cd;
        color: #fff;
        font-size: 14px;
      }
    }
    .body {
      ul {
        font-size: 12px;
      }
    }
  }
  .header1 {
    ul {
      height: 40px;
    }
  }
  .page {
    height: 50px;
    line-height: 50px;
    font-size: 12px;
    text-align: right;
    margin-right: 30px;
    margin-top: 30px;
  }
  .paging {
    display: flex;
    justify-content: center;
    padding: 30px;
  }
}
</style>
<style lang="less">
.el-table th {
  background-color: #1461cd !important;
  color: white !important;
  text-align: center;
  padding: 10px;
  &:hover {
    color: #a3daff !important;
  }
}
.el-table .sort-caret.ascending {
  border-bottom-color: #ffffff;
}
.el-table .sort-caret.descending {
  border-top-color: #ffffff;
}
</style>
